Week 7: GitHub Tracker by Elsa Carlström#39
Conversation
…ts for Project Chatbot
JuliaNiki
left a comment
JuliaNiki
left a comment
There was a problem hiding this comment.
Great project, Elsa! I see that you understand very well the positioning of elements and how to style a webpage correctly with both CSS and JavaScript.
One note would be to think about position of the chart on mobile view, it is really small and it would be challenging for someone outside Technigo to understand it without labels for colors (how many projects are done and left). Very nice styling though, I love it!
|
|
||
| This project opened up my eyes to the clever use of dynamic id's. By using it I was able to keep the functions separate and invoking them with arguments in the main function (getRepos) instead of having to collect them all in the main function in a "waterfall" structure to access the values of the variables inside. | ||
|
|
||
| Next step would be to add if the projects has collaborators or not (group or individual assignment), names of collaborators and the commits made for projects I've been a collaborator on. To be able to sort and/or search for the projects will come in handy when the number of projects will increase. |
There was a problem hiding this comment.
Great ideas for the future and nice touch that you fixed some extra features, especially language percentage display is impressive!
| const calculateLanguagePercentage = (repo) => { | ||
| fetch(`https://api.github.com/repos/${USER}/${repo.name}/languages`) | ||
| .then(res => res.json()) | ||
| .then(language => { | ||
| const html = language.HTML || 0; | ||
| const css = language.CSS || 0; | ||
| const js = language.JavaScript || 0; | ||
| const sum = html + css + js; | ||
|
|
||
| const htmlPercentage = ((html / sum) * 100).toFixed(1); | ||
| const cssPercentage = ((css / sum) * 100).toFixed(1); | ||
| const jsPercentage = ((js / sum) * 100).toFixed(1); | ||
|
|
||
| document.getElementById(`progress-${repo.name}`).innerHTML = /*html*/ ` | ||
| <div class="progress-html" style="width:${htmlPercentage}%;"></div> | ||
| <div class="progress-css" style="width:${cssPercentage}%;"></div> | ||
| <div class="progress-js" style="width:${jsPercentage}%;"></div> | ||
| ` | ||
| }) | ||
| } |
There was a problem hiding this comment.
Wow, really nice approach and result! I am glad I could see it and learn more about fetching languages :)
code/style.css
Outdated
| width: 100%; | ||
| height: 100%; | ||
| margin: 0; | ||
| background-image: url('./assets/background.png'); |
| .profile-wrapper { | ||
| background-color: rgba(255, 255, 255, 0.5); | ||
| text-align: center; | ||
| margin: 15px auto; |
There was a problem hiding this comment.
Thanks to your project I really noticed how handy it is to use these values of margin and will apply it to my future projects, thank you!
| <p class="links-text"><a href="${repo.html_url}">GitHub repository ➔</a> | <a href="${repo.homepage}">View it live ➔</a></p> | ||
| <p class="text">Most recent edit: ${latestCommit}</p> | ||
| <p class="text">Default branch: ${repo.default_branch}</p> | ||
| <p id="commits-${repo.name}" class="text">(commits yet to be displayed)</p> |
There was a problem hiding this comment.
Good touch that you did not need to make an if else statement for cases when commit messages were not displayed, and you found that way!
2 participants
Had a lot of fun with this project. I'm quite proud of the language-o-meter and the over-all design :)